// 绿色资质评估展示
import React, { Children, useEffect, useState } from 'react';
import { connect } from 'dva';
import * as echarts from 'echarts';
import './qualificationsAssess.less';
import { getGreenAptituAssessList } from '@/services/carbon'

const qualificationsAssess = (props) => {
  // 图表数据
  const [seriesData, setSeriesData] = useState({})

  useEffect(() => {
    // 调用获取图表接口
    fetchGreenAptituAssessList()
  }, [])

  // 获取图表接口
  const fetchGreenAptituAssessList = async () => {
    try {
      // 获取接口数据并赋值
      const res = await getGreenAptituAssessList()
      if (res.code === 200) {
        setSeriesData(res.data)
      }
    } catch (error) {
      console.error(error);
    }
  };

  // 监听表格数据变化渲染图表
  useEffect(() => {
    if (!seriesData.avgList) {
      return
    }
    let centerChart = echarts.init(document.getElementById("assessCenterChart"));
    let leftChart = echarts.init(document.getElementById("assessLeftChart"));
    let rightChart = echarts.init(document.getElementById("assessRightChart"));
    let industrySeries = []
    let industryXdata = []
    industrySeries.push({
      name: '绿色评价企业数',
      type: 'bar',
      yAxisIndex: 0,
      data: seriesData.industryList,
      label: {
        show: true, // 显示数据标签
        align: 'center', // 标签显示在柱子顶部
        verticalAlign: 'middle',
        color: '#000'
      },
      itemStyle: {
        // 柱子样式
        color: '#25B6B6', // 柱子颜色
        borderColor: '#25B6B6', // 柱子边框颜色
        borderWidth: 0 // 柱子边框宽度
      },
      barWidth: '30%',
    })
    industryXdata.push({
      data: seriesData.xAxis,
      axisLabel: {
        // 显示x轴的标签
        show: true
      },
      axisLine: { // 隐藏x轴的轴线
        show: false
      },
      axisTick: { // 隐藏x轴的刻度线
        show: false
      }
    })
    // 绘制图表
    centerChart.setOption({
      xAxis: industryXdata,
      yAxis: [
        {
          type: 'value',
          name: '单位：家',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          show: false,
          splitLine: {
            show: false,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 4,  // 虚线宽度
              color: 'gray'  // 虚线颜色
            }
          },
        },
      ],
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 15,  // 调整图表左边距
        right: 20,  // 调整图表右边距
        top: 30,  // 调整图表上边距
        bottom: 30,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: industrySeries,
      dataZoom: [
        {
          // 设置滚动条的隐藏与显示
          show: true,
          // 设置滚动条类型
          type: "slider",
          // 设置背景颜色
          backgroundColor: "#e9eaed",
          // 设置选中范围的填充颜色
          fillerColor: "#bbb",
          // 设置边框颜色
          borderColor: "#e9eaed",
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 数据窗口范围的起始数值
          startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          endValue: 12,
          // empty：当前数据窗口外的数据，被设置为空。
          // 即不会影响其他轴的数据范围
          filterMode: "empty",
          // 设置滚动条宽度，相对于盒子宽度
          width: "100%",
          // 设置滚动条高度
          height: 10,
          // 设置滚动条显示位置
          left: "center",
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // 控制手柄的尺寸
          handleSize: 0,
          // dataZoom-slider组件离容器下侧的距离
          bottom: 0,
        },
        {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          zoomLoxk: true,
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
        },
      ]
    });
    leftChart.setOption({
      xAxis: {
        type: 'value',
        show: false,
      },
      yAxis: {
        type: 'category',
        data: seriesData.xAxis,
        inverse: true,
        axisLine: {
          show: false  // 隐藏 y 轴轴线
        },
        axisTick: {
          show: false  // 隐藏刻度线
        },
        axisLabel: {
          show: true,  // 显示 y 轴标签（轴名）
          // 可以根据需要进一步定制标签样式
        }
      },
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 50,  // 调整图表左边距
        right: 50,  // 调整图表右边距
        top: 0,  // 调整图表上边距
        bottom: 20,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: [
        {
          name: '绿色企业评价各行业平均分',
          type: 'bar',
          yAxisIndex: 0,
          data: seriesData.avgList,
          barWidth: '90%',
          label: {
            show: true, // 显示数据标签
            align: 'center', // 标签显示在柱子顶部
            verticalAlign: 'middle',
            color: '#000'
          },
          itemStyle: {
            // 柱子样式
            color: '#5178FF', // 柱子颜色
            borderColor: '#5178FF', // 柱子边框颜色
            borderWidth: 0 // 柱子边框宽度
          },
          barWidth: '60%',
        }
      ],
      dataZoom: [
        {
          // 设置滚动条的隐藏与显示
          show: true,
          // 设置滚动条类型
          type: "slider",
          // 设置背景颜色
          backgroundColor: "#e9eaed",
          // 设置选中范围的填充颜色
          fillerColor: "#bbb",
          // 设置边框颜色
          borderColor: "#e9eaed",
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 数据窗口范围的起始数值
          startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          endValue: 10,
          // empty：当前数据窗口外的数据，被设置为空。
          // 即不会影响其他轴的数据范围
          filterMode: "empty",
          // 设置滚动条宽度，相对于盒子宽度
          width: 8,
          // 设置滚动条高度
          height: "90%",
          // 设置滚动条显示位置
          right: "right",
          top: "top",
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // 控制手柄的尺寸
          handleSize: 0,
          // dataZoom-slider组件离容器下侧的距离
          // bottom: 5,
          yAxisIndex: 0,
          orient: 'vertical', // 设置为竖向
        },
        {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
          zoomLoxk: true,
          width: 8,
          // 设置滚动条高度
          height: "90%",
          right: "right",
          top: "top",
          yAxisIndex: 0,
          orient: 'vertical', // 设置为竖向
        },
      ]
    });
    rightChart.setOption({
      xAxis: {
        type: 'value',
        show: false,
      },
      yAxis: {
        type: 'category',
        inverse: true,
        data: seriesData.yAxis,
        axisLine: {
          show: false  // 隐藏 y 轴轴线
        },
        axisTick: {
          show: false  // 隐藏刻度线
        },
        axisLabel: {
          show: true,  // 显示 y 轴标签（轴名）
          // 可以根据需要进一步定制标签样式
        }
      },
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 50,  // 调整图表左边距
        right: 50,  // 调整图表右边距
        top: 0,  // 调整图表上边距
        bottom: 20,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: [
        {
          name: '绿色企业评价各绿色评级企业数',
          type: 'bar',
          yAxisIndex: 0,
          data: seriesData.ratingNumList,
          barWidth: '90%',
          label: {
            formatter: function (params) {
              return `${params.value}家`;  // 自定义标签的文字
            },
            show: true, // 显示数据标签
            align: 'left', // 标签显示在柱子顶部
            verticalAlign: 'middle',
            position: 'right',
            color: '#000',
            distance: 20
          },
          itemStyle: {
            // 柱子样式
            color: '#25B6B6', // 柱子颜色
            borderColor: '#25B6B6', // 柱子边框颜色
            borderWidth: 0 // 柱子边框宽度
          },
          barWidth: '60%',
        }
      ],
      dataZoom: [
        {
          // 设置滚动条的隐藏与显示
          show: true,
          // 设置滚动条类型
          type: "slider",
          // 设置背景颜色
          backgroundColor: "#e9eaed",
          // 设置选中范围的填充颜色
          fillerColor: "#bbb",
          // 设置边框颜色
          borderColor: "#e9eaed",
          // 是否显示detail，即拖拽时候显示详细数值信息
          showDetail: false,
          // 数据窗口范围的起始数值
          startValue: 0,
          // 数据窗口范围的结束数值（一页显示多少条数据）
          endValue: 10,
          // empty：当前数据窗口外的数据，被设置为空。
          // 即不会影响其他轴的数据范围
          filterMode: "empty",
          // 设置滚动条宽度，相对于盒子宽度
          width: 8,
          // 设置滚动条高度
          height: "90%",
          // 设置滚动条显示位置
          right: "right",
          top: "top",
          // 是否锁定选择区域（或叫做数据窗口）的大小
          zoomLoxk: true,
          // 控制手柄的尺寸
          handleSize: 0,
          // dataZoom-slider组件离容器下侧的距离
          // bottom: 5,
          yAxisIndex: 0,
          orient: 'vertical', // 设置为竖向
        },
        {
          // 没有下面这块的话，只能拖动滚动条，
          // 鼠标滚轮在区域内不能控制外部滚动条
          type: "inside",
          // 滚轮是否触发缩放
          zoomOnMouseWheel: false,
          // 鼠标滚轮触发滚动
          moveOnMouseMove: true,
          moveOnMouseWheel: true,
          zoomLoxk: true,
          width: 8,
          // 设置滚动条高度
          height: "90%",
          right: "right",
          top: "top",
          yAxisIndex: 0,
          orient: 'vertical', // 设置为竖向
        },
      ]
    });
    // 绘制图表
    window.onresize = function () {
      // 自适应大小
      centerChart.resize();
      leftChart.resize();
      rightChart.resize();
    };
  }, [seriesData])

  return (
    <div className="assess-content">
      <div className="top-box">
        <div className="title">绿色评价企业数按行类分析</div>
        <div className="chart-box">
          <div id="assessCenterChart"></div>
        </div>
      </div>
      <div className="bottom-box">
        <div className="left-box">
          <div className="title">绿色企业评价各行业平均分</div>
          <div className="chart-box">
            <div id="assessLeftChart"></div>
          </div>
        </div>
        <div className="right-box">
          <div className="title">绿色企业评价各绿色评级企业数</div>
          <div className="chart-box">
            <div id="assessRightChart"></div>
          </div>
        </div>
      </div>
    </div>
  )
};

export default connect()(qualificationsAssess);
